<template>
    <div class="interaction">
        <div class="list-wrap">
          <div v-if="0" class="tab-title">
            <span @click="setTab('action')" id="btn-action-list" class="tab-list" :class="{'active':checkActive('action')}">
                发言列表
            </span>
            <!-- <span @click="setTab('user')" id="btn-user-list" class="tab-list" :class="{'active':checkActive('user')}">
                用户列表
                <label id="user-count">(0)</label>
            </span> -->
            <span @click="setTab('message')" id="btn-message-list" class="tab-list" :class="{'active':checkActive('message')}">
                聊天列表
            </span>
          </div>

          <div class="tab-container">
            <!-- 发言列表 -->
            <!-- <div class="action-list" :class="{'active':checkActive('action')}">
              <ActiveList/>
            </div> -->
            <!-- 用户列表 -->
            <!-- <div class="user-list" :class="{'active':checkActive('user')}">
              <UserList/>
            </div> -->
            <!-- 聊天 -->
            <div class="message-list" :class="{'active':checkActive('message')}">
              <MessageList/>
            </div>
            <!-- 问答 -->
            <!-- <div class="question-answer fold">
              <QuestionAnswer/>
            </div> -->
          </div>

        </div>
    </div>
</template>

<script>
import MessageList from './MessageList'
import UserList from './UserList'
import ActiveList from './ActiveList'
import QuestionAnswer from './QuestionAnswer'

let store = BJY.store

export default {
  components: {
    MessageList,
    UserList,
    ActiveList,
    QuestionAnswer
  },
  data () {
    return {
      classMode: '',
      activeTab: 'message'
    }
  },
  computed: {},
  watch: {},
  methods: {
    setTab (tab) {
      this.activeTab = tab
    },
    checkActive (tab) {
      return tab === this.activeTab
    }
  },
  created () {
    this.classMode = store.get('yxp_class_mode')
    // 这里监听一下举手被接收，切换到发言列表tab
    BJY.eventEmitter.on(
      BJY.eventEmitter.SPEAK_APPLY_RESULT_ACCEPT,
      (e, data) => {
        this.activeTab = 'action'
      }
    )
  },
  mounted () {},
  beforeDestroy () {}
}
</script>

<style lang='less' scoped>
//@import url(); 引入公共css类
.interaction {
  position: absolute;
  top: 360px;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 13px;

  .list-wrap {
    width: 100%;
    height: 100%;

    .tab-title {
      width: 100%;
      background: #fff;
      .tab-list {
        width: 50%;
        padding: 10px 0;
        display: inline-block;
        text-align: center;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 19px;
        cursor: pointer;
        position: relative;
        border-bottom: 2px solid #DEDEDE;
      }
      .active {
        color: #27BFA3;
        font-weight: bold;
        border-bottom: 2px solid #27BFA3;
      }

      .has-new {
        &:after {
          content: '';
          width: 4px;
          height: 4px;
          border-radius: 2px;
          background: red;
          position: absolute;
          top: 5px;
          right: 8px;
        }
      }
    }

    .tab-container {
      position: absolute;
      top: 0px; // 有tab时40px
      bottom: 0;
      left: 0;
      right: 0;
      background: #F0F2F4;
      border-top: none;

      .user-list, .message-list, .action-list {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        opacity: 0;
      }

      .active {
        left: 0;
        opacity: 1;
        z-index: 1;
      }

      .question-answer {
        position: absolute;
        bottom: 0;
        top: 0;
        width: 290px;
        left: -12px;
        background: #fff;
        transition: .3s all;
        z-index: 1;
      }

      .fold {
        top: unset;
        height: 36px;
      }
    }
  }
}
</style>
